﻿@{
    ViewBag.Title = "PatternTestLab";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style>
    .found
    {
      background-color: #ff0;
      color: #008000;
    }

    #searchLabel{
        margin-top: 50px;
        margin-bottom: 10px;
        color: #008000;
        font-size: 12pt;
        font-family: Consolas;
        font-weight: 500;
    }

    #searchResult{
        border: 1px solid #0e5deb;
        margin: 10px;
        padding: 10px;
        color: #00ff21;
        font-size: 12pt;
        font-family: Consolas;
    }
</style>

<h2>Pattern Test Lab</h2>

<form id="textsearch">
    <textarea id="incoming" cols="100" rows="10">
        Now is the time and this is the time and that is the time
    </textarea>
    <p>
        Search pattern: <input id="pattern" type="text" class="inputbox" value="t\w*e" />
    </p>
</form>
<button id="searchSubmit">Search for pattern</button>
<div id="searchLabel">Searching Result:</div>
<div id="searchResult"></div>

<script type="text/javascript">
    document.getElementById("searchSubmit").onclick = function () {
        // get pattern
        var pattern = document.getElementById("pattern").value;
        var re = new RegExp(pattern, "g");

        // get string
        var searchString = document.getElementById("incoming").value;

        // replace
        var resultString = searchString.replace(re, "<span class='found'>$&</span>");

        // insert into page
        document.getElementById("searchResult").innerHTML = resultString;
    }
</script>